<template>
	<div>
		<div id="ee">
		    <form id="ff" >
		        <fieldset>
		            <legend>登录</legend>
		            <p>
		                <label>请上传可识别脸部特征: </label>
						<input type="file" id="btnFile" name="myfile" accept="image/*"  placeholder="请选择头像上传"/>
		            </p>
		            <p>
		                <input type="button"  value="登录" @click="uploadBtn">
		            </p>
		        </fieldset>
		    </form>
			<p>
				<router-link class="link-reg" to='/python/faceRegister'>
				 <button>去注册页</button>
				</router-link>
			</p>
			<br/>
			<div v-if="faceData" >
				<p>
					<fieldset>
					    <legend>信息</legend>
					<table border="1" class="tabCss">
					  <tr style="width: 100%;">
					    <th>姓名</th>
					    <th>昵称</th>
					    <th>手机</th>
					    <th>邮箱</th>
					  </tr>
					  <tr>
					    <td>{{faceData.userName}}</td>
					    <td>{{faceData.nick_name}}</td>
					    <td>{{faceData.user_phone}}</td>
					    <td>{{faceData.user_email}}</td>
					  </tr>
					</table>
					</fieldset>
				</p>
			</div>
		</div>
		
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		data(){
			return {
				faceData:""
			}
		},
		methods:{
			uploadBtn() {
				var btnFile = document.querySelector('#btnFile');
				let formData = new FormData();
				formData.append('myfile', btnFile.files[0]);
				axios.post('http://39.103.131.74:9999/upload', formData).then(res => {
					if (res.data.code === 200) {
						this.faceData = res.data.data || ""
						this.$message.success(res.data.msg);
					} else{
						this.faceData = res.data.data || ""
						this.$message.error(res.data.msg);
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	#ee{
	    width: 600px;
	    margin: 30px auto;
		fieldset{
		    width:400px;
		    padding: 10px;
			border: 1px solid #000000;
			legend{
				width: 150px;
			}
			p {
			    margin-bottom: 10px;
				label{
				    margin-bottom:5px;
				}
				input{
				    height: 40px;
				    width: 96%;
					margin-top: 15px;
				}
			}
			
		}
		.link-reg{
			float: left;
			margin-top: 15px;
		}
		.tabCss{
			margin-top: 15px;
			    width: 380px;
			    line-height: 54px;
		}
	}
</style>
